/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20231018
* @version:0.1.7
* @type:interface
* @description:
* # SDrawer
* Sometimes, the Dialogue component does not meet our needs
* such as your form being too long, or if you need to temporarily display some documents, please use the SDrawer
* ## properties
* - in property <Themes> drawer-theme : drawer theme 
* - in property <brush> drawer-background-color : drawer background color
* - in property <PaddingType> padding-type: drawer padding type
* - in property <Position> position : the position of the drawer
* - in property <percent> proportion : the percentage of the drawer
* ## functions
* - function default-height-width()->{height:percent,width:percent} : count drawer height and width ⛔
* - function get-position()->{x:length,y:length} : count position ⛔
* ============================================
*/


import { SPopup } from "../popup/index.slint";
import { SCard } from "../card/index.slint";
import { Themes,Position,PaddingType,ShadowType,BorderType } from "../../use/index.slint";
import { DefaultSDrawerProps } from "../../themes/index.slint";

export component Drawer inherits SPopup { 
  theme: DefaultSDrawerProps.theme;
  is-show: DefaultSDrawerProps.is-show;
  mask-opacity: DefaultSDrawerProps.mask-opacity;
  in property <Themes> drawer-theme : DefaultSDrawerProps.drawer-theme;
  in property <brush> drawer-background-color <=> drawer.background;
  in property <PaddingType> padding-type: DefaultSDrawerProps.padding-type;
  in property <Position> position : DefaultSDrawerProps.position;
  in property <percent> proportion : DefaultSDrawerProps.proportion;
  function default-height-width()->{height:percent,width:percent} {
      if((position==Position.Left)||(position==Position.Right)){
        { height:100%,width:root.proportion}
      }else if((position==Position.LeftTop)||(position==Position.LeftBottom)){
        { height:100%,width:root.proportion}
      }else if((position==Position.RightTop)||(position==Position.RightBottom)){
        { height:100%,width:root.proportion}
      }else{
        {height:root.proportion,width:100%}
      }
  }
  function get-position()->{x:length,y:length} {
      if((position==Position.Left)||(position==Position.LeftTop)||(position==Position.LeftBottom)){
        {x:0px,y:0px}
      }else if((position==Position.Right)||(position==Position.RightTop)||(position==Position.RightBottom)){
        {x:root.width - drawer.width,y:0px}
      }else if((position==Position.Top)||(position==Position.TopLeft)||(position==Position.TopRight)){
        {x:0px,y:0px}
      }else{
        {x:0px,y:root.height - drawer.height}
      }
  }
  drawer:=SCard {
    height: default-height-width().height;
    width: default-height-width().width;
    theme: root.drawer-theme;
    x: get-position().x;
    y: get-position().y;
    border-type:BorderType.None;
    padding-type: root.padding-type;
    clip: true;
    TouchArea {
      @children
    }
  }
} 